<template>
  <div class="user-avatar-dropdown">
    <Dropdown @on-click="handleClick">
      <Badge :dot="!!messageUnreadCount">
        <Avatar :src="userAvatar"/>
        {{userName}}
      </Badge>
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem name="changePssword">修改密码</DropdownItem>
        <DropdownItem name="logout">退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>

    <Modal
        v-model="showModal"
        title="修改密码">
        <Form ref="psswordForm" :model="form" :rules="rules" :label-width="100">
            <FormItem prop="password"  label="旧密码" >
              <Input v-model="form.password" type="password" password  placeholder="请输入旧密码" style="width: 300px"/>
            </FormItem>
            <FormItem prop="newPassword"  label="新密码" >
              <Input v-model="form.newPassword" type="password" password  placeholder="请输入新密码" style="width: 300px"/>
            </FormItem>
            <FormItem prop="querPassword"  label="确认密码" >
                <Input style="width:300px"  type="password" password  v-model="form.querPassword" placeholder="请输入确认密码">
                </Input>
            </FormItem>
        </Form>
        <div slot="footer">
          <Button style="width: 90px" @click="modalCancel()">取消</Button>
          <Button type="primary" style="width: 90px; margin-left: 20px" @click="submit" >确定</Button>
        </div>

    </Modal>
  </div>
</template>

<script>
import './user.less'
import { mapActions,mapState } from 'vuex'
import {
  userPassword
} from '@/api/system/account-manage.js'
export default {
  name: 'User',
  props: {
    userAvatar: {
      type: String,
      default: ''
    },
    messageUnreadCount: {
      type: Number,
      default: 0
    }
  },
  data() {
        return {
            showModal:false,
            form:{
              newPassword:'',
              password:'',
              querPassword:'',
            },
            rules:{
                newPassword: [
                  {
                    required: true,
                    message: '新密码不能为空',
                    trigger: 'blur'
                  }
                ],
                password: [
                  {
                    required: true,
                    message: '旧密码不能为空',
                    trigger: 'blur'
                  }
                ],
                querPassword: [
                  {
                    required: true,
                    message: '二次确认密码不能为空',
                    trigger: 'blur'
                  }
                ],
            },
        };
    },
    computed: {
			...mapState({
				userName: state => state.user.userName,
			}),
		},
  methods: {
    ...mapActions([
      'handleLogOut'
    ]),
    logout () {
      this.handleLogOut().then(() => {
        this.$router.push({
          name: 'login'
        })
      })
    },
    handleClick (name) {
      
      var that=this
      switch (name) {
        case 'logout': this.logout()
          break;
          case 'changePssword':
            that.showModal=true
          break
      }
    },
    modalCancel(){
        this.showModal=false
    },
    submit(){
      
        this.$refs['psswordForm'].validate((valid) => {
        if (valid) {
          if(this.form.newPassword!=this.form.querPassword){
              this.$Message.error('两次密码输入不一致请重新输入')
            return false
          }

          const opt = {
            newPassword:this.form.newPassword,
            password:this.form.password,
          }
          userPassword(opt).then(res=>{
            this.modalCancel()
            this.$Message.success('密码修改成功')
            this.logout()
          })
          
        }
      })
    },
  }
}
</script>
